'use client';

import { Modal, Form, InputNumber, Input, message } from 'antd';
import { useState } from 'react';
import { BalanceRechargeForm } from '@/types/user';

interface UserBalanceRechargeModalProps {
  open: boolean;
  onCancel: () => void;
  onSuccess: () => void;
  userId: string;
  userName: string;
  currentBalance: number;
}

const UserBalanceRechargeModal: React.FC<UserBalanceRechargeModalProps> = ({
  open,
  onCancel,
  onSuccess,
  userId,
  userName,
  currentBalance,
}) => {
  const [form] = Form.useForm<BalanceRechargeForm>();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      
      // TODO: 调用API充值
      console.log('用户余额充值:', { ...values, userId });
      
      message.success('用户余额充值成功');
      form.resetFields();
      onSuccess();
    } catch (error) {
      console.error('用户余额充值失败:', error);
      message.error('用户余额充值失败');
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="用户余额充值"
      open={open}
      onOk={handleSubmit}
      onCancel={handleCancel}
      confirmLoading={loading}
      width={500}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          userId,
        }}
      >
        <Form.Item label="用户信息">
          <div className="p-3 bg-gray-50 rounded">
            <div>用户姓名: {userName}</div>
            <div>当前余额: ¥{currentBalance.toFixed(2)}</div>
          </div>
        </Form.Item>

        <Form.Item
          name="amount"
          label="充值金额"
          rules={[
            { required: true, message: '请输入充值金额' },
            { type: 'number', min: 0.01, message: '充值金额必须大于0' },
          ]}
        >
          <InputNumber
            style={{ width: '100%' }}
            placeholder="请输入充值金额"
            precision={2}
            min={0.01}
            addonBefore="¥"
          />
        </Form.Item>

        <Form.Item
          name="remark"
          label="备注"
        >
          <Input.TextArea
            placeholder="请输入备注信息（可选）"
            rows={3}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default UserBalanceRechargeModal; 